<template>
	<div v-if="userInfo" class="account-info flex justify-center items-center">
		<account-avatar
			class="h-15"
			:data="userInfo?.avatar"
			:width="60"
			:toProfile="toProfile"
			:clickAvatar="clickAvatar" />
	</div>
	<div class="flex items-center justify-center mt-1">
		<div style="font-size: 18px">{{ userInfo?.username }}</div>
	</div>
	<div v-if="vipBonusStatus" class="flex items-center justify-center mt-1">
		<img :src="vipBonusStatus?.currentVipIcon" alt="" class="w-[20px]" />
		<p class="user-info-level text-sm text-white">
			{{ vipBonusStatus?.currentVipName }}
		</p>
	</div>
</template>

<script setup lang="ts">
import { AccountAvatar } from '@/components/account'
import { PropType } from 'vue'
import { UserInfo } from '@/types'

defineProps({
	vipBonusStatus: {
		type: [Object, null] as PropType<any>
	},
	userInfo: {
		type: [Object, null] as PropType<UserInfo | null>,
		required: true
	},
	toProfile: {
		type: Boolean,
		default: true
	},
	clickAvatar: {
		type: Function
	}
})
</script>

<style scoped></style>
